import React from 'react';
import { Form, Space, Row, Col } from 'antd';
import { FormListFieldData } from 'antd/lib/form/FormList';
import { DownOutlined, RightOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import InputGroupWithFormItem from '@/components/InputGroupWithFormItem';
import UnitPicker from '@/pages/dashboard/Components/UnitPicker';

interface Props {
  field: FormListFieldData;
}

export default function index(prosp: Props) {
  const { t } = useTranslation('alertRules');
  const { field } = prosp;
  const [expanded, setExpanded] = React.useState(false);

  return (
    <div data-oid='h7xx:96'>
      <div className='mb1' data-oid='9qjdrn2'>
        <Space
          className='cursor-pointer'
          onClick={() => {
            setExpanded(!expanded);
          }}
          data-oid='5tjf5kz'
        >
          {t('advanced_settings')}
          {expanded ? <DownOutlined data-oid='nhq5h8b' /> : <RightOutlined data-oid='48jw5cw' />}
        </Space>
      </div>
      <div
        style={{
          display: expanded ? 'block' : 'none',
        }}
        data-oid='bp_.-wq'
      >
        <Row data-oid='9ektt_8'>
          <Col span={6} data-oid='c-ijrb.'>
            <InputGroupWithFormItem label={t('common:unit')} data-oid='hb8ajsh'>
              <Form.Item {...field} name={[field.name, 'unit']} initialValue='none' noStyle data-oid='49d7ia7'>
                <UnitPicker optionLabelProp='cleanLabel' style={{ width: '100%' }} dropdownMatchSelectWidth={false} data-oid='ucwys6q' />
              </Form.Item>
            </InputGroupWithFormItem>
          </Col>
        </Row>
      </div>
    </div>
  );
}
